<template>
	<view>
		<u-navbar :back-icon-name="backIconName" :is-back="false" :background="background">
			<view class="d-flex a-center">
				<image src="../../static/images/promotion/backtrack.png.png" mode="" class="backtrack ml-2" @click="backtrack_img"></image>
				<view class="ml-2 font-32">添加促销商品</view>
			</view>		
		</u-navbar>
		<view class="m-2  mb-2 bg-white rounded-20" @click="pro_seach">
			<view class="ml-3">
				<view class="clazz d-flex j-sb a-center border-bottom">
					<view class="white-space">商品名称</view>
					<view class="d-flex a-center j-center  mx-3">
						<text class="ellipsis-1">{{item_detail.goods_name?item_detail.goods_name:'请选择'}}</text>
						<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
					</view>
				</view>
				<view class="clazz  d-flex j-sb a-center">
					<view class="">商品价格</view>
					<view class="d-flex a-center j-end mr-3 w-50">
						<text class="ellipsis-1">{{item_detail.shop_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rounded-20 m-2 pl-3  bg-white">
			<view class="d-flex j-sb pr-3 py-3 border-bottom" @click="initiate">
				<view class="">开始时间</view>
				<view class="d-flex j-center a-center">
					<view class="text-right mr-1">{{initiate_time==!'undefined'?"请设置":initiate_time}}</view>
					<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
				</view>
			</view>
			<view class="d-flex j-sb pr-3 py-3" @click="conclude">
				<view class="">结束时间</view>
				<view class="d-flex j-center a-center">
					<view class="text-right mr-1" >{{conclude_time==!'undefined'?"请设置":conclude_time}}</view>
					<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
				</view>
			</view>		
		</view>
		<view class="mx-2 mb-2 bg-white rounded-20">
			<view class="ml-3">
				<view class=" a-center  py-3 d-flex j-sb clazz">
					<view class="">促销价格</view>
					<view class="mr-3">
						<input type="digit"  class="text-right" placeholder="输入商品价格" v-model="promote_price"  placeholder-class="mr-1 d-flex j-end" @input="pro_price" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
			
		</view>
		<view class="bg-white release py-2 w-100 position-fixed bottom-0">
			<button type="warn" @click="rele">保存</button>
		</view>
		
		<!-- 返回提示 -->
		<u-popup v-model="popup_show" class="logOutPopup" mode='center' border-radius="20">
				<view class="popup_wd">
					<view class="py-5 text-center bg-white">你的信息还未保存，返回后将会丢失</view>
					<view class="d-flex  bg-light-secondary border-top">
						<view class="flex-1 py-2 text-center border-right text-danger" @click="Off">取消</view>
						<view class="flex-1 py-2 text-center text-danger" @click="Confirm">确定返回</view>
					</view>	
				</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 开始 -->
		<u-picker v-model="initiate_show" mode="time" @confirm="initiate_confirm"></u-picker>
		<!-- 结束 -->
		<u-picker v-model="conclude_show" mode="time" @confirm="conclude_confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#ffffff',
				},
				promote_price:"", // 价格
				initiate_show:false,// 开始 开关
				initiate_time:"", // 开始时间
				conclude_show:false, // 结束开关
				conclude_time:"", // 结束时间
				item_detail:"", // 商品详情
				popup_show:false
			}
		},
		
		methods: {
			// 搜索
			pro_seach(){
				uni.redirectTo({
					url:"/pages/promotion-seach/promotion-seach?add="+'添加'
				})
			},
			// 开始时间
			initiate(){
				this.initiate_show=true
			},
			// 结束时间
			conclude(){
				this.conclude_show=true
			},
			// 开始
			initiate_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()>=new Date(this.conclude_time).getTime()){
					this.$refs.uToast.show({
						title: '开始日期不能晚于结束日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.initiate_time=time
				}
			},
			// 结束
			conclude_confirm(e){
				let time=`${e.year}-${e.month}-${e.day}`;
				if(new Date(time).getTime()<=new Date(this.initiate_time).getTime()){
					this.$refs.uToast.show({
						title: '结束日期不能早于开始日期',
						type: 'default',
						duration:1000,
					})
				}else{
					this.conclude_time=time
				}
			},
			
			pro_price(e){
				this.promote_price=e.detail.value
			},
			// 保存
			rele(){
				if(!this.item_detail.goods_name){
					this.$refs.uToast.show({
						title: '请设置活动名称',
						type: 'default',
					})	
				}else if(this.initiate_time=="" || this.conclude_time==""){
					this.$refs.uToast.show({
						title: '请设置活动开始及结束时间',
						type: 'default',
					})
				}else if(this.promote_price==""){
					this.$refs.uToast.show({
						title: '请设置活动价格',
						type: 'default',
					})
				}else{
					this.$H.post("admin/promotion/add",{
						goods_id:this.item_detail.goods_id,
						promote_price:this.promote_price,
						start_time:this.initiate_time,
						end_time:this.conclude_time
					}).then(res=>{
						this.$refs.uToast.show({
							title: '添加促销商品成功！',
							type: 'success',
							duration:1000,
							callback:()=>{
								uni.navigateBack({
									delta:2
								})
							}
						})
					})
					
				}
			},
			// 返回
			backtrack_img(){
				this.popup_show=true
			},
			// 返回
			Confirm(){
				uni.navigateBack({
					delta:1
				})
			},
			// 取消弹框
			Off(){
				this.popup_show=false
			}
		},
		onShow() {
			if(getApp().globalData.pro_detail){
				var globalData = getApp().globalData.pro_detail;
				this.item_detail=globalData
				console.log(this.item_detail)
			}
		},
		onUnload() {
			var globalData = getApp().globalData.pro_detail;
			getApp().globalData.pro_detail=""
			this.initiate_time=""
			this.conclude_time=""
			this.promote_price=""
			
		}
	}
</script>

<style>
	.release /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.logOutPopup /deep/ .popup_wd{
		width: 600upx;
	}
</style>
